<template>
  <div class="order">
    <div class="order-card">
      <van-row>
        <van-col span="12"
          ><img src="../assets/order.svg" />
          <p>配货中</p>
        </van-col>
        <van-col span="12"
          ><img src="../assets/ordersuccess.svg" />
          <p>已完成</p>
        </van-col>
      </van-row>
    </div>
    <van-tabs>
      <van-tab title="配货中" name="a">配货中</van-tab>
      <van-tab title="已完成" name="b">已完成</van-tab>
      <van-tab title="全部订单" name="c">全部订单</van-tab>
    </van-tabs>
  </div>
</template>

<script steup>
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
.order {
  .order-card {
    padding: 15px;
    background-image: url(../assets/bgwave.svg);
    background-size: cover;
    background-position: center;
    .van-row {
      margin: 0 20px;
      margin-top: 30px;
      background-color: white;
      border-radius: 10px;
      padding: 10px;
      .van-col:nth-child(1){
        border-right: 1px solid rgb(226, 226, 226);
      }
      .van-col {
        text-align: center;
        p {
          font-size: 12px;
        }
        img {
          width: 40px;
        }
      }
    }
  }
  .van-tabs {
    padding: 15px;
  }
}
</style>